<template>
    <div class="page has-navbar">
        <von-header>
            <span slot="title">消息</span>
        </von-header>
        <div class="page-content mynews">
            <div class="new-content">
                <div class="new-list">
                    <div class="new-item" v-for="(l,index) in message.messageList">
                        <p>{{l.message_content}}</p>
                        <div class="new-other">
                            <span>{{l.create_time | timeFilter}}</span>
                            <span @click="exchangePage($event)">详情 <i class="ion-chevron-right"></i></span>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="new-bottom">到底了哦~~</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                message:{},
                id:'',
                type:''
            }
        },
        methods:{
            exchangePage(ev){
                console.log($(ev.target).parent().parent().index())
                var index=$(ev.target).parent().parent().index()
                this.type=this.message.messageList[index].message_extras.news_type
                this.id=this.message.messageList[index].message_extras.news_id
                if(this.type=='activity'){
                    this.$router.push('/imagelist/'+this.id)
                }else if(this.type=='product'){
                    this.$router.push('/detaillist/'+this.id)
                }
            }
        },
        created(){
            this.axios.get('https://app.toursforfun.com/api/messages?device=all&page=1&page_size=10')
                .then(data=>{
                    this.message=data.data.data
                    console.log(this.message.messageList)
                })
                .catch(err=>{
                    console.log(err)
                })
        },
        filters:{
            timeFilter:function(value){
                return value.substr(5,5)
            }
        }
    }
</script>
<style>
    .new-list{
        margin:0 24px;
    }
    .new-item{
        padding: 18px 0 24px 0;
        overflow: hidden;
        height: auto;
        border-bottom: 1px solid #E1E0E6;
    }
    .new-item p{
        font-size: 16px;
        color: #363636;
        padding-bottom: 12px;
        margin-bottom: 0;
        line-height: 29px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        vertical-align: baseline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    }
    .new-other span{
        float: left;
        width:50%;
    }
    .new-other span:nth-of-type(1){
        color: #999;
    }
    .new-other span:nth-of-type(2){
        text-align: right;
        color: #0090f2;
    }
    .new-bottom{
        padding: 46px 0;
        text-align: center;
        color: #999;
    }
    .mynews{
        margin-bottom:44px;
    }
</style>